import React, { useEffect, useState } from 'react';
import '../../styles/zheng/dataServiceProject.scss'
import { Button, Form, Input, Select, Table, Col, message, Modal } from 'antd';
import { NavLink } from 'react-router-dom'
import { getServiceProject, delServiceProject } from '../../api/zheng/project'
import Header from '../../components/liu/header'
import { ExclamationCircleFilled } from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
interface Props {

}
function DataServiceProject(props: Props) {
    var navigate = useNavigate()
    const { confirm } = Modal;
    const [messageApi, contextHolder] = message.useMessage();
    const { Option } = Select;
    const { Search } = Input;
    const [data, setData] = useState([])
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 100 });
    //初始化加载
    useEffect(() => {
        getServiceProject().then((res: any) => {
            setData(res.data)
        })
    }, [])
    //表单验证通过提交
    const onFinish = async (values: any) => {

    };
    //点击搜索
    const onSearch = (value: string) => {
        getServiceProject().then((res: any) => {
            var newarr = res.data.filter((item:any)=>{
                return item.name.indexOf(value)!=-1
            })
            setData(newarr)
        })
    };
    //表格列数据
    const columns: any = [
        { title: '项目编号', dataIndex: 'id', },
        { title: '项目名称', dataIndex: 'name', },
        { title: '次数', dataIndex: 'count', },
        { title: '项目类型', dataIndex: 'projectType', },
        {
            title: '项目原价',
            dataIndex: 'price',
            render: (price: any) => {
                return <span style={{ color: "#FA746B" }}>{price}</span>
            }
        },
        { title: '项目介绍', dataIndex: 'projectInfo', },
        {
            title: '操作',
            render: (data: any) => {
                return (
                    <>
                        <NavLink to="/index/serveproject-edit" state={data}>编辑</NavLink>
                        <span onClick={() => { showConfirm(data.id) }}>删除</span>
                    </>
                )
            }
        },
    ];

    const showConfirm = (id: any) => {
        confirm({
            title: '删除确认',
            icon: <ExclamationCircleFilled />,
            content: '确定删除此项目信息吗?',
            okText:"确认",
            cancelText:"取消",
            async onOk() {
                var res = await delServiceProject({id})
                console.log(res);
                if (res.status == 200) {
                    messageApi.open({
                        type: 'success',
                        content: '删除成功',
                    });
                    navigate(0)
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    //分页发生改变后执行,pagi是最新的页码数据,是个对象 current:1,pageSize:5,total:100 },拿到最新的对象再去发请求
    const handleChange = (pagi: any) => {
        setPagination(pagi) //更新页码
    }
    return (
        <div className='dataServiceProject'>
            <div className="main">
                <Header txt="服务项目管理"></Header>
                <div className="inputbox">
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        layout="inline"

                    >
                        <Col span={8}>
                            <Form.Item
                                label="项目类型"
                                name="projectTypes"
                            >
                                <Select
                                    defaultValue={"请选择"}
                                    allowClear
                                >
                                    <Option value="">全部</Option>
                                    <Option value="付费项目">付费项目</Option>
                                    <Option value="免费项目">免费项目</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Search placeholder="请输入关键字" onSearch={onSearch} />
                        </Col>
                    </Form>
                    <Button type="primary" onClick={()=>{navigate("/index/serveproject-add")}}>新增服务项目</Button>
                </div>

                <div className="table">
                    <Table columns={columns} dataSource={data} pagination={pagination} onChange={(pagi) => { handleChange(pagi) }} />
                </div>

            </div>

        </div>
    );
}

export default DataServiceProject;